<template>
  <s-layout :title="'工资条详情'" :navbar="normal" leftIconColor="#333" :autoBack="false" :leftIcon="leftIcon"
    :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
    <view class="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/gongzitiao_bg.png)` }" v-if="data">
      <view class="header public" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
        <view class="header_name">
          <up-avatar class="avatar" :font-size="14" :src="`${baseUrl}${data.user.avatar}`" :size="'120rpx'"></up-avatar>
          <view class="name">{{ data.user.nickname }}</view>
        </view>
        <view class="date" @click="clickdate">
          <image class="flex_img" :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon01.png`"
                mode="scaleToFill" />
          {{ date }}
        </view>
      </view>

      <!-- 内容 -->
      <view class="content">
        <view class="salary_top">
          <view class="title">
            <image class="title_img" :src="`${baseUrl}/uploads/uniapp_image/staff/shenpi_icon10.png`"
                mode="scaleToFill" />
            <view class="title_name">工资明细(元)</view>
          </view>
          <view class="middle">
            <view class="middle_money">{{ data.real_salary }}</view>
            <text class="middle_text">实发薪资</text>
          </view>
          <view class="bottom">
            <view class="bottom_title">工资</view>
            <view class="bottom_list">
              <view class="list_col_3">
                <view class="blue">{{ data.base_salary }}</view>
                <view class="line">基本薪资</view>
              </view>
              <view class="list_col_3">
                <view class="blue">虚位以待</view>
                <view class="line">出勤天数</view>
              </view>
              <view class="list_col_3">
                <view class="blue">虚位以待</view>
                <view class="line">缺勤天数</view>
              </view>
            </view>
          </view>
        </view>
        <scroll-view scroll-y class="comprehensive">
          <view class="public item_wrap">
          <view class="title">本月薪资合计</view>
          <view class="item">
            <view class="item_left">基本工资：</view>
            <view class="item_right blove">+{{ data.base_salary }}</view>
          </view>
          <view class="item" >
            <view class="item_left">提成：</view>
            <view class="item_right blove">+{{ data.commission }}</view>
          </view>
          <view class="item">
            <view class="item_left">补助：</view>
            <view class="item_right blove">+{{ data.subsidy }}</view>
          </view>
          <view class="item">
            <view class="item_left">工资小计：</view>
            <view class="item_right blove">+{{ Number(data.base_salary) + Number(data.commission) + Number(data.subsidy) }}</view>
          </view>
        </view>
        <view class="public item_wrap" >
          <view class="title">扣款</view>
          <view class="item">
            <view class="item_left">迟到/早退：</view>
            <view class="item_right gray">-{{ data.late_and_leave }}</view>
          </view>
          <view class="item">
            <view class="item_left">请假：</view>
            <view class="item_right gray">-{{ data.ask_leave }}</view>
          </view>
        
        </view>
        <view class="public item_wrap" >
          <view class="title">社保缴纳</view>
          <view class="item">
            <view class="item_left">五险一金：</view>
            <view class="item_right gray">-{{ data.insurance_house_fund }}</view>
          </view>
        </view>
        </scroll-view>
      </view>
    </view>

    <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无数据" marginTop="50%"></u-empty>

  </s-layout>
  <!-- 日期 -->
  <up-datetime-picker v-model="date_time" :closeOnClickOverlay="true" :show="date_show" mode="year-month" :title="'请选择发薪日期'" @confirm="date_confirm" @cancel="date_cancel" @close="date_close" :minDate="-2209017943000"></up-datetime-picker>
</template>

<script setup>
  import { baseUrl } from '@/sheep/config';
  import sheep from '@/sheep';
  import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
  import { ref, reactive } from 'vue';
  import { formatDate } from '@/utils/fn.js';
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const ids = ref()
  const data =  ref()
  onLoad((options)=>{
    ids.value = options.ids
    date.value = options.date
    let dateParts = date.value.split('-');  
    let year = parseInt(dateParts[0], 10);  
    let month = parseInt(dateParts[1], 10) - 1; // 注意：月份在 Date 对象中是 0-11  
    // let day = 1; // 当月的第一天  
    // 创建一个新的 Date 对象  
    let date1 = new Date(year, month);  
    // 获取时间戳（毫秒数）  
    let timestamp = date1.getTime();  
    date_time.value = timestamp
    getSalary_slipDetails()
  })

  // 封装获取详情接口
  const detailsData = ref()
  const getSalary_slipDetails = async () => {
    let params = {}
    if(ids.value) {
      params= {
        ids:ids.value
      }
    } else {
      params= {
        date:date.value
      }
    }
    const res = await sheep.$api.salary_sheet.salary_slipViewAPI(params)
    data.value = res.data
  }

  //选择日期
  const date = ref()
  const clickdate = ()=>{
    date_show.value = true
  }
  // 入职日期
  const date_time = ref(946656000000);
  const date_show = ref(false)
      // 打开
      // 确定
  const date_confirm = (e) => {
    date.value = formatDate(e.value/1000).substring(0,7)
    data.value = null
    // ids.value = null
    ids.value = ''
    getSalary_slipDetails()
    date_close()
  }
      // 关闭
  const date_close = () => {
      date_show.value = false
  }
      // 取消
  const date_cancel = () => {
      date_close()
  }

</script>

<style lang="scss" scoped>
.app {
  background-size: 100%;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 头像 */
.header {
  height: 160rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  .header_name{
    display: flex;
    align-items: center;  
  }

  .name {
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: 500;
    font-size: 46rpx;
    margin-left: 30rpx;
  }
  .date{
    background: $uni-bg-color;
    border-radius: 32rpx;
    box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    height: 64rpx;
    width: 236rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $uni-color-primary;
    font-weight: $uni-font-weight;
   font-size:$uni-font-size-26;
    .flex_img{
      width: 28rpx;
      height: 26rpx;
      margin-right: 10rpx;
    }
  }
}

// / 公共
.public {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}

//内容
.content {
  border-radius: 28rpx;
  background-color: $uni-bg-color;
  width: 96%;
  height: auto;
  margin: 0 auto;
  .salary_top{
    width: 92%;
    margin: 30rpx auto;
    .title{
      display: flex;
      justify-content: left;
      align-items: center;
      height: 100rpx;
      .title_img{
        width:70rpx;
        height: 70rpx;
        border-radius: 48rpx;
        background-color: #F7F5F6;  
      }
      .title_name{
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-base;
        margin-left: 18rpx;
      }
    }
    .middle{
      height: 160rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .middle_money{
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 54rpx;
        margin-bottom: 20rpx;
      }
      .middle_text{
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-base;
      }
    }
    .bottom{
      .bottom_title{
        height: 70rpx;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
      }
      .bottom_list{
        width: 100%;
        border-radius: 16px;
        height: 176rpx;
      background-color: #F9FAFF;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .list_col_3{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        .blue{
          color: $uni-color-primary;
          font-weight: $uni-font-weight;
          font-size: 44rpx;
          margin-bottom: 10rpx;
        }
        .line{
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
        }
      }
      }
    }
  }
  .item_wrap {
    .title {
      padding: 0rpx 0 0 30rpx;
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 34rpx;
      height: 70rpx;
      line-height: 70rpx;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 23rpx;
        left: 7%;
        z-index: 9;
        width: 68rpx;
        height: 14rpx;
        border-radius: 10rpx;
        background-color: rgba(0, 56, 247, 0.5);
      }
    }

    .item {
      width: 85%;
      margin: 0 auto ;
      display: flex;
      justify-content: space-between;
      padding: 0 20rpx;
      align-items: center;
      height: 70rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .item_left {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;
      }
      .blove{
        color: $uni-color-primary !important;
      }
    
      .item_right {
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
       font-size:$uni-font-size-26;
      }
    }
    .item_card{
      width: 93%;
      margin: 0 auto 30rpx auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item_card_left{
        width: 49%;
        margin-bottom: 30rpx;
      }
      
    }
  }
}

.comprehensive {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  height: 40vh;
  border-bottom-left-radius: 28rpx;
  border-bottom-right-radius: 28rpx;
}
:deep(.u-icon__icon) {
	background: $uni-bg-color;
	width: 64rpx;
	height: 64rpx;
	justify-content: center;
	border-radius: 50%;
  
}
</style>